<!--
 * @Description: 我的收藏页面组件
 * @Author: hai-27
 * @Date: 2020-02-20 17:22:56
 * @LastEditors: YaoXiaoTian
 * @LastEditTime: 2021-06-09 18:06:28
 -->
<template>
  <div class="collect">
    <Banner></Banner>
    <el-header>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        active-text-color="#CF975A"
        @select="handleSelect"
      >
        <el-menu-item index="1">教育培训</el-menu-item>
        <el-menu-item index="2">社区医疗</el-menu-item>
      </el-menu>
    </el-header>
    <div>
      <div class="list" v-if="communityList && communityList.length">
        <Education :data="communityList" v-if="activeIndex == 1" />
        <Medical :data="communityList" v-if="activeIndex == 2" />
      </div>
      <Empty v-else />
      <div class="footer">
        <el-pagination
          prev-text="上一页"
          next-text="下一页"
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="changePage"
          @prev-click="changePage"
          @next-click="changePage"
          hide-on-single-page
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import Banner from "../../components/banner/index.vue";
import Empty from "../../components/Empty.vue";
import Medical from "./components/medical/index";
import Education from "./components/education/index";
export default {
  data() {
    return {
      activeIndex: "1",
      sortIndex: "",
      api: this.$apiPath.getTrainPage,
      communityList: [],
      page: 1,
      rows: 9,
      total: 0,
      trainName: this.$route.query.search,
      medicalName: "",
    };
  },
  components: {
    Banner,
    Medical,
    Education,
    Empty,
  },
  created() {
    this.getData();
  },
  watch: {
    $route: {
      handler() {
        this.currentPage = 1;
        if (this.activeIndex == 2) {
          this.medicalName = this.$route.query.search;
        } else {
          this.trainName = this.$route.query.search;
        }
        this.getData();
        //深度监听，同时也可监听到param参数变化
      },
      deep: true,
    },
  },
  methods: {
    handleSelect(key) {
      this.activeIndex = key;
      if (this.activeIndex == 2) {
        this.api = this.$apiPath.getMedicalPage;
      } else {
        this.api = this.$apiPath.getTrainPage;
      }
      this.getData();
    },
    getData() {
      let params = {
        page: this.page,
        rows: this.rows,
      };
      if (this.activeIndex == 2) {
        params.medicalName = this.medicalName;
      } else {
        params.trainName = this.trainName;
      }
      console.log("获取数据了");
      this.$http
        .fetch(`${this.api}`, {
          method: "get",
          params,
        })
        .then((res) => {
          if (res.code === 200) {
            this.communityList = res.data.records;
            this.total = res.data.total;
            this.page = res.data.current;
            if (this.activeIndex == 2) {
              this.medicalName = "";
            } else {
              this.trainName = "";
            }
          }
        })
        .catch((err) => {
          return Promise.reject(err);
        });
    },
    changePage(e) {
      this.page = e;
      this.getData();
    },
  },
};
</script>
<style lang="less">
.collect {
  .list {
    width: 1225px;
    margin: 0 auto;
  }
  .footer {
    padding: 0;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 33px;
    background-color: #ffffff;
    .btn-prev {
      width: 74px;
      height: 30px;
      border: 1px solid #c7c7c7;
      border-radius: 15px;
    }
    .btn-next {
      width: 74px;
      height: 30px;
      border: 1px solid #c7c7c7;
      border-radius: 15px;
      color: #999999;
    }
    .el-pager li {
      width: 30px;
      height: 30px;
      border: 1px solid #c7c7c7;
      border-radius: 15px;
      color: #999999;
    }
    .el-pager {
      .number {
        text-align: center;
        padding: 0;
      }
      li:not(.active).number:hover {
        color: #999999 !important;
      }
    }
    .el-pager li:not(.disabled).active {
      background-color: #cf975a;
    }
  }
}
</style>
